<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>新生报到注册管理员管理后台系统</title>
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
    </head>
    <body class="hold-transition">
        <div id="app">
            <div class="content-header">
                <el-menu
                        :default-active="activeIndex2"
                        class="el-menu-demo"
                        mode="horizontal"
                        @select="handleSelect"
                        background-color="#379ae0"
                        text-color="#fff"
                        active-text-color="#e4a61e">
                    <el-menu-item index="1"><a href="">学生管理中心</a></el-menu-item>
                    <el-menu-item index="3" ><a href="AdminIndex_message.html">消息管理中心</a></el-menu-item>
                    <el-menu-item index="3" ><a href="AdminStu_inSchool.html">到校统计</a></el-menu-item>
                </el-menu>
            </div>
            <div class="app-container">
                <div class="box">
                    <!--查询条件-->
                    <div class="filter-container">
                        <el-input placeholder="学生学号" v-model="pagination.stuId" style="width: 200px;" class="filter-item"></el-input>
                        <el-input placeholder="学生姓名" v-model="pagination.stuName" style="width: 100px;" class="filter-item"></el-input>
                        <el-input placeholder="寝室" v-model="pagination.stuDormitory" style="width: 100px;" class="filter-item"></el-input>
                        <el-input placeholder="专业" v-model="pagination.majorName" style="width: 200px;" class="filter-item"></el-input>
                        <el-select v-model="pagination.inSchool" style="width: 100px;"   placeholder="到校">
                            <el-option label="已到校" :value="true" >已到校</el-option>
                            <el-option label="未到校" :value="false">未到校</el-option>
                            <el-option :value="null">取消选择</el-option>
                        </el-select>
                        <el-select v-model="pagination.stuOneCard" style="width: 100px;"   placeholder="一卡通">
                            <el-option label="已领取" :value="true">已领取</el-option>
                            <el-option label="未领取" :value="false">未领取</el-option>
                            <el-option :value="null">取消选择</el-option>
                        </el-select>
                        <el-select v-model="pagination.stuBedding" style="width: 100px;"   placeholder="床上用品">
                            <el-option label="已领取" :value="true">已领取</el-option>
                            <el-option label="未领取" :value="false">未领取</el-option>
                            <el-option :value="null">取消选择</el-option>
                        </el-select>
                        <el-select v-model="pagination.stuTrainUniform" style="width: 100px;"   placeholder="军训服装">
                            <el-option label="已领取" :value="true">已领取</el-option>
                            <el-option label="未领取" :value="false">未领取</el-option>
                            <el-option :value="null">取消选择</el-option>
                        </el-select>
                        <!--在条件查询时初始化currentPage的值为1-->
                        <el-button @click="pagination.currentPage=1;findPage()" class="dalfBut">执行查询</el-button>
                        <el-button type="primary" class="butT" @click="handleCreate()">新建学生信息</el-button>
                    </div>
                    <!--列表展示-->
                    <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                        <el-table-column prop="id" align="center" width="60" label="序号"></el-table-column>
                        <el-table-column prop="stuId" label="学号" width="100"  align="center"></el-table-column>
                        <el-table-column prop="stuName" label="姓名" width="80" align="center"></el-table-column>
                        <el-table-column prop="stuIdCard" label="身份证" width="150" align="center"></el-table-column>
                        <el-table-column prop="stuMail" label="邮箱" align="center"></el-table-column>
                        <el-table-column prop="stuPhone" label="电话" align="center"></el-table-column>
                        <el-table-column prop="stuInSchool" label="到校时间" align="center"></el-table-column>
                        <el-table-column prop="stuDormitory" label="寝室号" align="center"></el-table-column>
                        <el-table-column prop="stuOneCard" label="一卡通" :formatter="formatBoolean" width="60" align="center"></el-table-column>
                        <el-table-column prop="stuBedding" label="床上用品" :formatter="formatBoolean" width="80" align="center"></el-table-column>
                        <el-table-column prop="stuTrainUniform" label="军训服装" :formatter="formatBoolean" width="80" align="center"></el-table-column>
                        <el-table-column prop="majorName" label="专业名" align="center"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页标签-->
                    <div class="pagination-container">
                        <el-pagination
                            class="pagiantion"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.currentPage"
                            :page-size="pagination.pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="pagination.total">
                        </el-pagination>
                    </div>
                    <!-- 新增标签弹层 -->
                    <div class="add-form">
                        <el-dialog title="新增学生数据" :visible.sync="dialogFormVisible">
                            <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="学号" prop="stuId">
                                            <el-input v-model="formData.stuId"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="姓名" prop="stuName">
                                            <el-input v-model="formData.stuName"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="身份证号" prop="stuIdCard">
                                            <el-input v-model="formData.stuIdCard"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="专业名"  prop="majorName">
                                            <el-select v-model="formData.majorName"  @change="getVL"  placeholder="请选择">
                                                <el-option v-for="item in options"
                                                           :key="item.label"
                                                           :label="item.label"
                                                           :value="item.label">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取消</el-button>
                                <el-button type="primary" @click="handleAdd()">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                    <!-- 编辑标签弹层 -->
                    <div class="add-form">
                        <el-dialog title="编辑学生数据" :visible.sync="dialogFormVisible4Edit">
                            <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="学号" prop="stuId">
                                            <el-input v-model="formData.stuId"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="姓名" prop="stuName">
                                            <el-input v-model="formData.stuName"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="身份证" prop="stuIdCard">
                                            <el-input v-model="formData.stuIdCard"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="邮箱" prop="stuMail">
                                            <el-input v-model="formData.stuMail"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="电话"  prop="stuPhone">
                                            <el-input v-model="formData.stuPhone"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="寝室号" prop="stuDormitory">
                                            <el-input v-model="formData.stuDormitory"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                       <el-form-item label="一卡通" prop="stuOneCard"/>
                                        <el-select v-model="formData.stuOneCard" style="width: 100px;"   placeholder="一卡通">
                                            <el-option :value="true">已领取[值为true]</el-option>
                                            <el-option :value="false">未领取[值为false]</el-option>
                                            <el-option :value="null">取消选择</el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="床上用品" prop="stuBedding"/>
                                        <el-select v-model="formData.stuBedding" style="width: 100px;"   placeholder="床上用品">
                                            <el-option :value="true">已领取[值为true]</el-option>
                                            <el-option :value="false">未领取[值为false]</el-option>
                                            <el-option :value="null">取消选择</el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="军训服装" prop="stuTrainUniform"/>
                                        <el-select v-model="formData.stuTrainUniform" style="width: 100px;"   placeholder="军训服装">
                                            <el-option :value="true">已领取[值为true]</el-option>
                                            <el-option :value="false">未领取[值为false]</el-option>
                                            <el-option :value="null">取消选择</el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="专业名"  prop="majorName">
                                            <el-select v-model="formData.majorName"  @change="getVL"  placeholder="请选择">
                                                <el-option v-for="item in options"
                                                           :key="item.label"
                                                           :label="item.label"
                                                           :value="item.label">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                                <el-button type="primary" @click="handleEdit()">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script>
        var vue = new Vue({
            el: '#app',
            data:{
                options: [{
                    value: '1',
                    label: '计算机科学与技术'
                }, {
                    value: '2',
                    label: '电子信息工程'
                }, {
                    value: '3',
                    label: '软件工程'
                }, {
                    value: '4',
                    label: '动物医学'
                }],
                pagination: {//分页相关模型数据
					  currentPage: 1,//当前页码
					  pageSize:10,//每页显示的记录数
					  total:0,//总记录数
					  queryString:null//查询条件
				},
				dataList: [],//当前页要展示的分页列表数据
                formData: {},//表单数据
                dialogFormVisible: false,//增加表单是否可见
                dialogFormVisible4Edit:false,//编辑表单是否可见
                rules: {//校验规则
                    stuId: [{ required: true,pattern: /^\d{10}$/, message: '【必填】学号格式错误,10位数', trigger: 'blur'}],
                    stuName: [{ required: true, message: '【必填】学生名必填', trigger: 'blur' }],
                    stuIdCard: [{ required: true,pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,message: '【必填】学生身份证号码错误', trigger: 'blur'}],
                    majorName: [{required: true,message: '【必填】专业名必选', trigger: 'blur'}],
                    stuMail: [{required: false,pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,message: '邮箱格式错误', trigger: 'blur'}],
                    stuPhone: [{required: false,pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,message: '电话格式错误', trigger: 'blur'}]
                     }
            },
            //钩子函数，VUE对象初始化完成后自动执行
            created() {
                this.loginOK();
                this.findPage();
            },
            methods: {
                loginOK(){
                   var id = sessionStorage.getItem("adminId");
                   if(id==null || id==""){
                       console.log("你没有登录");
                       location.href="adminlogin.html";
                       axios.get("/loginfalse/admin").then(()=>{})
                   }
                },
                //前端boolean类型的值的显示
                formatBoolean: function (row, column, cellValue) {
                    var ret = ''  //你想在页面展示的值
                    if (cellValue) {
                        ret = "已领取"  //根据自己的需求设定
                    } else {
                        ret = "未领取"
                    }
                    return ret;
                },
                //通过前端的单选传专业id和专业名到后端
                getVL(val){
                    let obj = {};
                    obj = this.options.find(function(item){
                       return item.label ===val;
                   })
                    //传专业id
                    this.formData.majorId=obj.value;
                    //console.log(obj.value);
                    //打印专业名
                    //console.log(val);
                },
                //添加学生数据
                handleAdd() {
                    this.$refs['dataAddForm'].validate((valid)=>{
                        if(valid){
                            //表单校验通过，发生ajax请求，将数据提交到后台处理
                            axios.post("/student/saveOrUpdate",this.formData).then((res)=>{
                                //close addform
                                this.dialogFormVisible = false;
                                //这里的res.data是固定的写法，就是返回的Result
                                if(res.data.flag){
                                    //成功后，调用分页查询方法，查询最新的数据
                                    this.findPage();
                                    //弹出提示
                                    this.$message({
                                        message:res.data.message,
                                        type:'success'
                                    });
                                }else{//执行失败，弹出提示
                                    this.$message.error(res.data.message);
                                }
                            })
                        }else{
                            this.$message.error("数据校验失败，请检查你输入的信息是否正确");
                            return false;
                        }
                    })
                },
                //分页查询
                findPage() {
                        var param ={
                            currentPage:this.pagination.currentPage,
                            pageSize:this.pagination.pageSize,
                            stuId:this.pagination.stuId,
                            stuName:this.pagination.stuName,
                            stuDormitory:this.pagination.stuDormitory,
                            majorName:this.pagination.majorName,
                            stuOneCard:this.pagination.stuOneCard,
                            stuBedding:this.pagination.stuBedding,
                            stuTrainUniform:this.pagination.stuTrainUniform,
                            inSchool:this.pagination.inSchool,
                        };
                        axios.post("/student/findPage",param).then((res)=>{
                            this.pagination.total = res.data.total;
                            this.dataList = res.data.rows;
                        })
                },
                //切换页码
                handleCurrentChange(currentPage) {
                    this.pagination.currentPage = currentPage;
                    this.findPage();
                },
                // 重置表单
                resetForm() {
                    this.formData ={};
                },
                // 弹出添加窗口
                handleCreate(){
                    this.dialogFormVisible = true;
                    this.resetForm();
                },
                handleCreate2(){
                    this.dialogFormVisible4Edit = true;
                    this.resetForm();
                },
                // 弹出编辑窗口
                handleUpdate(row) {
                    this.dialogFormVisible4Edit = true;
                    axios.get("/student/findById?id="+row.id).then((res)=>{
                        if(res.data.flag){
                            this.formData = res.data.data;
                        }else{
                            this.$message.error(res.data.message);
                        }
                    });

                },
                //编辑确认
                handleEdit() {
                    this.$refs['dataEditForm'].validate((valid)=>{
                        if(valid){
                            axios.post("/student/saveOrUpdate",this.formData).then((res)=>{
                                if(res.data.flag){
                                    this.$message({
                                        message:res.data.message,
                                        type:'success'
                                    });
                                }else{
                                    this.$message.error(res.data.message);
                                }
                            }).finally(()=>{
                                this.findPage();
                                this.dialogFormVisible4Edit = false;
                            });

                        }else{
                            this.$message.error("表单验证不通过");
                            return false;
                        }
                    })
                },
                // 删除
                handleDelete(row) {
                    this.$confirm("你确定要删除当前户数据吗","提示",{type:'warning'}).then(()=>{
                        axios.get("/student/remove?id=" +row.id).then((res)=>{
                            if(res.data.flag){
                                this.$message({
                                    type:'success',
                                    message:res.data.message
                                });
                                this.findPage();
                            }else{
                                this.$message.error(res.data.message)
                            }
                        });
                    }).catch(()=>{
                        this.$message({
                            type:'info',
                            message:'操作已取消'
                        });
                    });
                }
            }
        })
    </script>
</html>